<!--
 * @Author: fj
 * @LastEditors: fj
 * @description:
 * @updateInfo: 本次更新内容：
 * @Date: 2024-03-04 11:43:27
 * @LastEditTime: 2024-03-05 16:54:53
-->
<template>
  <n-modal
    v-model:show="eVisible"
    preset="dialog"
    :show-icon="false"
    :title="form.id ? '修改项目' : '新增项目'"
    style="width: 435px"
    mask-closable="false"
    @close="closeDialog"
  >
    <n-form
      ref="formRef"
      label-placement="left"
      label-width="80px"
      require-mark-placement="left"
      :model="form"
      :rules="formRules"
    >
      <n-form-item label="父级项目">
        <n-tree-select
          v-model:value="form.parentId"
          :options="groups"
          default-expand-all
          placeholder="请选择父级项目"
          size="small"
          key-field="id"
          label-field="name"
        />
      </n-form-item>
      <n-form-item path="name" label="项目名称">
        <n-input
          v-model:value="form.name"
          placeholder="请输入项目名称"
          @keydown.enter.prevent
        />
      </n-form-item>
    </n-form>
    <div style="text-align: right">
      <n-button type="primary" :focusable="false" @click="addUpdateProject">
        确定
      </n-button>
    </div>
  </n-modal>
</template>
<script lang='ts'>
import { UPDATE_MODEL_EVENT } from "@/utils/constants";
import { useProjectStore } from "@/store/project";
import { NTreeSelect, NInput, NButton, useMessage } from "naive-ui";
import { deptApi } from "@/api/system";
import { watch, computed, ref } from "vue";
export default defineComponent({
  name: "ProjectManagementEdit",
  components: {
    NTreeSelect,
    NInput,
    NButton,
  },
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
    editData: {
      type: Object,
      default: () => null,
    },
  },
  emits: [UPDATE_MODEL_EVENT, "getList"],
  setup(props, ctx) {
    const nMessage = useMessage();
    const projectStore = useProjectStore();
    const groups = computed(() => projectStore.groups);
    const form = ref({
      id: "",
      name: "",
      parentId: "",
    });
    const formRules = {
      name: [{ required: true, message: "请输入项目名称", trigger: ["blur"] }],
    };
    const eVisible = ref(false);
    const formRef = ref(null);

    watch(
      () => props.modelValue,
      (val: Boolean) => {
        if (val) {
          eVisible.value = true;
          if (props.editData?.id) {
            form.value = {
              ...props.editData,
            };
          }
        } else {
          eVisible.value = false;
        }
      }
    );

    const closeDialog = () => {
      eVisible.value = false;
      formRef.value?.restoreValidation();
      form.value = {
        id: "",
        name: "",
        parentId: "",
      };
      ctx.emit(UPDATE_MODEL_EVENT, false);
    };

    const addUpdateProject = async () => {
      formRef.value?.validate(async (err) => {
        if (!err) {
          let param = {
            ...form.value,
          };
          let res = form.value.id
            ? await deptApi.updateDep({ ...param })
            : await deptApi.addDep({ ...param });
          if (res?.success) {
            ctx.emit("getList");
            closeDialog();
          } else {
            nMessage.warning(res.msg);
          }
        }
      });
    };
    return {
      form,
      formRules,
      eVisible,
      closeDialog,
      formRef,
      groups,
      addUpdateProject,
    };
  },
});
</script>
